<template>
  <div class="paragraph">
    <fx-card title="基础用法">
      <fx-paragraph :content="content"></fx-paragraph>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义行数">
      <fx-input-number v-model="rows" :min="1"></fx-input-number>
      <fx-paragraph :content="content" :row="rows"></fx-paragraph>
      <template #hide>
        <pre v-highlight="row"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义按钮文字">
      <fx-paragraph :content="content" :symbol="symbols"></fx-paragraph>
      <template #hide>
        <pre v-highlight="symbol"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="是否需要关闭按钮">
      <fx-switch v-model="isCloseBtn"></fx-switch>
      <fx-paragraph :content="content" :isCloseBtn="isCloseBtn"></fx-paragraph>
      <template #hide>
        <pre v-highlight="closeBtn"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { defaultList } from '@/assets/menuList'
import { ref } from 'vue'

const content = `${defaultList[0].introduction}--${defaultList[1].introduction}--${defaultList[2].introduction}`
const rows = ref<number>(2)
const symbols = ref<string[]>(['more', 'close'])
const isCloseBtn = ref<boolean>(false)

const base = '<fx-paragraph :content="content"></fx-paragraph>'

const row = `<fx-input-number v-model="rows" :min="1"></fx-input-number>
<fx-paragraph :content="content" :row="rows"></fx-paragraph>

const rows = ref<number>(2)`

const symbol = `<fx-paragraph :content="content" :symbol="symbols"></fx-paragraph>

const symbols = ref(['more', 'close'])`

const closeBtn = `<fx-switch v-model="isCloseBtn"></fx-switch>
<fx-paragraph :content="content" :isCloseBtn="isCloseBtn"></fx-paragraph>

const isCloseBtn = ref<boolean>(false)`

</script>

<style scoped lang="scss">
.paragraph {
}
</style>
